<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北极熊</title>
    <link rel="stylesheet" href="css/bear.css">
    <link rel="stylesheet" href="css/onload.css">
</head>

<body>
    <div class="preload" >
		<img class="airplane" src="./images/飞机.png" alt="">
		<h3>北极站</h3>
		<img class="cloud1" src="./images/cloud.png" alt="cloud1">
		<img class="cloud2" src="./images/cloud.png" alt="cloud2">
		<img class="cloud3" src="./images/cloud.png" alt="cloud3">
	</div>
    <div class="scene"
        style="--hue-1: 100; --hue-2: 147; --hue-3: 219; --alpha-1: 0.13109462719449483; --alpha-2: 0.4809489268013014; --alpha-3: 0.5875160443609215;">
        <div class="star"
            style="--size: 1.4847320631544942; --x: 44.86773252221434; --y: 66.20778986980615; --duration: 10; --delay: 6;">
        </div>
        <div class="star"
            style="--size: 0.10856500239837086; --x: 43.18656067723086; --y: 49.92219363368697; --duration: 6; --delay: 7;">
        </div>
        <div class="star"
            style="--size: 0.6663391888967531; --x: 63.28667233251348; --y: 15.343032400959; --duration: 10; --delay: 5;">
        </div>
        <div class="star"
            style="--size: 1.7832948236723585; --x: 52.30018127212666; --y: 39.58393689086503; --duration: 10; --delay: 4;">
        </div>
        <div class="star"
            style="--size: 0.8268868343375111; --x: 23.89040486197045; --y: 82.17185753770508; --duration: 8; --delay: 10;">
        </div>
        <div class="star"
            style="--size: 0.5131788106414255; --x: 3.595218474459805; --y: 15.98117808517532; --duration: 10; --delay: 10;">
        </div>
        <div class="star"
            style="--size: 1.5255711097608828; --x: 82.44683690724833; --y: 70.77575644419025; --duration: 10; --delay: 7;">
        </div>
        <div class="star"
            style="--size: 0.6383565092145997; --x: 37.27748794857069; --y: 78.30840082099455; --duration: 8; --delay: 10;">
        </div>
        <div class="star"
            style="--size: 0.2301547884397963; --x: 73.24378947395394; --y: 29.13626218276646; --duration: 10; --delay: 6;">
        </div>
        <div class="star"
            style="--size: 1.8450510455166658; --x: 9.191050293801851; --y: 1.8550256094036932; --duration: 6; --delay: 6;">
        </div>
        <div class="star"
            style="--size: 0.6185400719959486; --x: 37.697212436032146; --y: 90.30803315925304; --duration: 9; --delay: 4;">
        </div>
        <div class="star"
            style="--size: 1.3682361350001906; --x: 27.150293837058804; --y: 94.79196543961488; --duration: 5; --delay: 8;">
        </div>
        <div class="star"
            style="--size: 0.056114746203097976; --x: 20.508458125575004; --y: 89.22121100009683; --duration: 6; --delay: 5;">
        </div>
        <div class="star"
            style="--size: 1.9687192642244233; --x: 73.05334835572874; --y: 70.81089066666175; --duration: 5; --delay: 4;">
        </div>
        <div class="star"
            style="--size: 0.01835946456355897; --x: 18.426856610483867; --y: 40.57370028893696; --duration: 8; --delay: 4;">
        </div>
        <div class="star"
            style="--size: 1.279434467557231; --x: 86.77881775531064; --y: 40.17503616583311; --duration: 10; --delay: 6;">
        </div>
        <div class="star"
            style="--size: 1.7241576911702525; --x: 21.12680156926117; --y: 82.91919821019033; --duration: 5; --delay: 4;">
        </div>
        <div class="star"
            style="--size: 1.7200374999340116; --x: 99.52986342373748; --y: 49.25959838966383; --duration: 5; --delay: 7;">
        </div>
        <div class="star"
            style="--size: 0.715660546067157; --x: 48.133869035224805; --y: 25.879324827772532; --duration: 6; --delay: 6;">
        </div>
        <div class="star"
            style="--size: 1.4679564771652776; --x: 4.53302704830989; --y: 48.3505387819535; --duration: 6; --delay: 8;">
        </div>
        <div class="hill"></div>
        <div class="moon"></div>
        <div class="lights">
            <div class="light" style="--duration: 12; --delay: 10; --x: 1; --y: 7; --scale: 0.07921118959700538;"></div>
            <div class="light" style="--duration: 12; --delay: 9; --x: 3; --y: 0; --scale: 0.04309716319846633;"></div>
            <div class="light" style="--duration: 10; --delay: 4; --x: 1; --y: 1; --scale: 0.0557277177330812;"></div>
            <div class="light" style="--duration: 9; --delay: 4; --x: 0; --y: 3; --scale: 0.09377321963757435;"></div>
            <div class="light" style="--duration: 11; --delay: 8; --x: 5; --y: 1; --scale: 0.09187632481269452;"></div>
            <div class="light" style="--duration: 15; --delay: 8; --x: 4; --y: 1; --scale: 0.007688490105183976;"></div>
            <div class="light" style="--duration: 14; --delay: 6; --x: 1; --y: 4; --scale: 0.027509557443092757;"></div>
            <div class="light" style="--duration: 14; --delay: 10; --x: 0; --y: 4; --scale: 0.07100868705735805;"></div>
            <div class="light" style="--duration: 10; --delay: 9; --x: 5; --y: 8; --scale: 0.08685544578061577;"></div>
            <div class="light" style="--duration: 5; --delay: 4; --x: 5; --y: 9; --scale: 0.07327836438556286;"></div>
            <div class="light" style="--duration: 13; --delay: 8; --x: 5; --y: 2; --scale: 0.04715684885611047;"></div>
            <div class="light" style="--duration: 11; --delay: 5; --x: 4; --y: 8; --scale: 0.06736733078759569;"></div>
            <div class="light" style="--duration: 11; --delay: 6; --x: 0; --y: 5; --scale: 0.05132912295918035;"></div>
            <div class="light" style="--duration: 12; --delay: 7; --x: 2; --y: 2; --scale: 0.08327754286747684;"></div>
            <div class="light" style="--duration: 7; --delay: 9; --x: 2; --y: 1; --scale: 0.07740974418445934;"></div>
            <div class="light" style="--duration: 15; --delay: 5; --x: 4; --y: 10; --scale: 0.07208962978638875;"></div>
            <div class="light" style="--duration: 9; --delay: 6; --x: 2; --y: 8; --scale: 0.010963103754125436;"></div>
            <div class="light" style="--duration: 14; --delay: 7; --x: 4; --y: 5; --scale: 0.07514123946282121;"></div>
            <div class="light" style="--duration: 12; --delay: 9; --x: 4; --y: 7; --scale: 0.02915295831851481;"></div>
            <div class="light" style="--duration: 5; --delay: 7; --x: 1; --y: 4; --scale: 0.014061113409662207;"></div>
            <div class="light" style="--duration: 11; --delay: 4; --x: 4; --y: 8; --scale: 0.09935179432353788;"></div>
            <div class="light" style="--duration: 7; --delay: 10; --x: 1; --y: 2; --scale: 0.0316669651371986;"></div>
            <div class="light" style="--duration: 5; --delay: 8; --x: 0; --y: 2; --scale: 0.03878072766633252;"></div>
            <div class="light" style="--duration: 7; --delay: 8; --x: 4; --y: 0; --scale: 0.04731737227661679;"></div>
            <div class="light" style="--duration: 5; --delay: 6; --x: 3; --y: 2; --scale: 0.04004332746627228;"></div>
            <div class="light" style="--duration: 8; --delay: 9; --x: 3; --y: 1; --scale: 0.06148852366721251;"></div>
            <div class="light" style="--duration: 15; --delay: 5; --x: 5; --y: 10; --scale: 0.07254457165693358;"></div>
            <div class="light" style="--duration: 12; --delay: 10; --x: 3; --y: 8; --scale: 0.09704484059877645;"></div>
            <div class="light" style="--duration: 7; --delay: 9; --x: 1; --y: 3; --scale: 0.0055741895438983224;"></div>
            <div class="light" style="--duration: 9; --delay: 9; --x: 5; --y: 9; --scale: 0.040727917495630164;"></div>
        </div>
    </div>
    <div class="bear" style="display: none;"></div>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="text">
        <h1>
            <span>想</span>
            <span>和</span>
            <span>你</span>
            <span>去</span>
            <span>北</span>
            <span>极</span>
            <span>,</span>
            <span>看</span>
            <span>极</span>
            <span>光</span>
            <span>和</span>
            <span>北</span>
            <span>极</span>
            <span>熊</span>
          </h1>
    </div>
    <script>
        var text = document.querySelector('.text h1')
        var bear = document.querySelector('.bear')
        var W = document.body.clientWidth
        var preload = document.querySelector('.preload')
        // console.log(W);
        if(W < 800) {
            preload.style.left = '-25%'
        }
        if (W < 680) {
            preload.style.left = '-35%'
            preload.style.top  = '-20%'
            text.style.fontSize = '10px'
        }
        setTimeout(function(){
             text.style.display = 'none'
        },9000)
        setTimeout(function(){
             bear.style.display = 'block'
        },3000)
    </script>
    <script src="./js/onload.js"></script>
</body>

</html>